<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理系统</title>
<style> 	
	.main{
		width:90%;
		margin:0 auto;
	}
	.user{
		width: 1065px;
		margin: 0.5%;
		overflow: hidden;
	}
/* Add styles for the page */
   .container {
      width: 80%;
      margin: 0 auto;
      text-align: center;
    }

    .user_query-container {
      margin-top: 50px;
    }

    input[type="text"] {
      width: 40%;
      height: 30px;
      padding: 5px;
      border: 1px solid #fbc2eb;
      font-size: 16px;
      border-radius: 5px;
    }

    button[type="submit"] {
      width: 20%;
      height: 40px;
      background-color: #fbc2eb;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-bottom: 50px;
      font-weight:bold;
    }

    button[type="submit"]:hover {
      background-color: rgb(255, 128, 192);
    }


table {
	border-collapse: collapse;
	width: 90%;
	text-align: center;
	position: absolute;
	left: 5%;
}

th, td {
	border:2px solid #fff;
	padding: 8px;
}

th {
	background-color: #fbc2eb;
	color: rgb(0, 0, 0);
}

tr:nth-child(even) {
	background-color: #f2f2f2;
}
/*编辑，删除指标**/
#modify, #delete{
	background-color:#fbc2eb;
	color: white;
	border: none;
	padding: 5px 10px;
	margin-right: 5px;
	cursor: pointer;
	text-decoration: none;
	font-size: 15px;
	font-weight:bold;
}

#add {
	  width: 20%;
      height: 30px;
      background-color: #fbc2eb;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-top:3px;
      font-weight:bold;
      float: right;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      font-size:14px;
      padding-top: 8px;
}
</style>
<script type="text/javascript" src="js/vue-2.6.10.js"></script>
<script type="text/javascript" src="js/axios.js"></script>

</head>
<body>
<div class="user main">
 
	<!-- Add a container for the page -->
  <div class="container">
    <!-- Add a form for the search box -->
    <div class="user_query-container">
      <form action="#">
      <input type="text" placeholder="请输入用户名称或账号" id="user_queryBox">
        <button type="submit">搜索</button>
        <a href="user_add.html" id="add">添加用户</a>
      </form>
    </div>
	
    <!-- Add a container for the search results -->
    <div id="commod_queryResults"></div>
  </div>
	
	<table id="us">
		<thead>
			<tr>
				<th>用户名</th>
				<th>账号</th>
				<th>电话</th>
				<th>地址</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>			
		<tr v-for="u in user">
				<td>{{u.uName}}</td>
				<td>{{u.uId}}</td>
				<td>{{u.uPhone}}</td>
				<td>{{u.uAddress}}</td>
				<td>{{u.uSex}}</td>
				<td>
					<a :href="'user_modify.html?id='+u.uId" id="modify">修改</a>
					<a href="javascript:void(0);" id="delete" v-on:click="udelete(u.uId)">删除</a>
				
				</td>
			</tr>
			
			
			
		</tbody>
	</table>
	
	<script type="text/javascript">
	
		
		
	
	
	
		let vue = new Vue({
			el:'#us',
			data:{
				user:[]
			},
			created(){
			
				axios.get('/OrderServert/user.do').then(
					function(res_obj){
						vue.user = res_obj.data.data;
					}
				).catch(
					function(error_obj){
						alert("网络加载异常！！！！！！！");
					}
				)
			},
			methods:{
				udelete: function(id){
					console.log(id);
					axios.delete('/OrderServert/user.do/'+id).then(
						function(res_obj){
							if(res_obj.data){
								window.location.href="user.html";
							}
						}
					).catch(
						function(error_pbj){
							alert("网络加载异常！！！！！！");
						}
					)
			}
	}
		});
		
	
	</script>
</div>
</body>
</html>